<template>
	<view class="filter">
		<view class="filter-item">
			<view class="filter-name m-r-10">价格</view>
			<view class="filter-icon" @click="onSwitchPrice">
				<up-icon name="arrow-up-fill" size="8" :color="price ? '#fb5500' : '#999999'"></up-icon>
				<up-icon name="arrow-down-fill" size="8" :color="!price ? '#fb5500' : '#999999'"></up-icon>
			</view>
		</view>
		<view class="filter-item" @click="onSwitchNumber">
			<view class="filter-name m-r-10">销量</view>
			<view class="filter-icon">
				<up-icon name="arrow-up-fill" size="8" :color="number ? '#fb5500' : '#999999'"></up-icon>
				<up-icon name="arrow-down-fill" size="8" :color="!number ? '#fb5500' : '#999999'"></up-icon>
			</view>
		</view>
		<view class="filter-item" @click="$emit('filter')">
			<view class="filter-icon">
				<up-icon name="grid" size="18" color="#999999"></up-icon>
			</view>
			<view class="filter-name m-l-10">筛选</view>
		</view>
	</view>
</template>

<script setup>
const emits = defineEmits(["filter", "switchPrice", "switchNumber"]);

const price = defineModel("price");

const number = defineModel("number");

const onSwitchPrice = () => {
	price.value = !price.value;
	emits("switchPrice", price.value);
};

const onSwitchNumber = () => {
	number.value = !number.value;
	emits("switchNumber", number.value);
};
</script>

<style lang="scss" scoped>
.filter {
	background-color: #ffffff;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.filter-item {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.filter-name {
			font-size: 30rpx;
		}
	}
}
</style>
